<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header
        style="
          font-size: 40px;
          color: #409eff;
          background-color: rgb(238, 241, 246);
        "
        >---北斗定点智能垃圾分拣机器人产品实时追踪平台---
      </el-header>

      <el-container>
        <el-aside width="100px">
          <i class="el-icon-user-solid"></i>
        </el-aside>

        <el-container>
          <el-main>
<el-steps :active="3" align-center>
  <el-step title="输入新的个人信息" icon="el-icon-user-solid"></el-step>
  <el-step title="确保本人操作"  icon="el-icon-warning"></el-step>
  <el-step title="修改成功" icon="el-icon-check"></el-step>
</el-steps>
            <el-input v-model="username" placeholder="请输入新的用户名"></el-input>
            <el-input v-model="password" placeholder="请输入新的密码"></el-input>
            <el-button type="primary" @click="change">确认修改</el-button>
          </el-main>

          <el-footer
            style="
              font-size: 40px;
              color: #67c23a;
              background-color: rgb(238, 241, 246);
            "
            >---全民参与垃圾分类，共享环保低碳生活---
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
      methods: {
      async change() {
        
      try {
        const response = await axios.post('http://localhost:9000/modify', {
          username: this.username,
          password: this.password
        });
        if (response.data.msg == "success") {
          this.$alert('修改成功！', '提示', {
          confirmButtonText: '确定',
        });
        } else {
          alert('修改失败，请稍后重试~');
        }
      } 
      catch (error) {
        console.error('修改出错:', error);
        alert('修改失败，请稍后重试');
      }

      }
    }
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>